/**
 * Author: Shen Yanqiu
 * Date: 2017-12-18
 * Time: 19:36
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Page } from 'components';
import { connect } from 'dva';
import { Link } from 'react-router-dom';
import { Button, Row, Col, Form, Input, message, Layout } from 'antd';
import { config } from 'utils';
import styles from './ChangePassword.less';
import moment from "moment/moment";

const { Sider, Content } = Layout;
class ChangePassword extends React.Component {
  static propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
    forgetPassword: PropTypes.object,
    app: PropTypes.object,
    user: PropTypes.object,
  };

  constructor (props) {
    super(props);
    this.state = {};
  }

  // 验证两次密码是否一致
  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('');
    } else {
      callback();
    }
  };
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  render () {
    const {
      loading,
      dispatch,
      forgetPassword,
      app,
      user,
      form: {
        getFieldDecorator,
        validateFieldsAndScroll,
        getFieldValue,
        resetFields,
        validateFields,
      },
    } = this.props;
    // 获取手机号码 进行发送验证
    const getCode = () => {
      validateFields(["mobile"], (error, values) => {
        console.log(values);
        if (error) {
          return ;
        }
        const params = { mobile: values.mobile };
        if (!values.mobile) {
          message.error("手机号错误！");
          return;
        }
        dispatch({ type: 'forgetPassword/getCode', payload: params });
      });
    };
    // 点击确认
    const handleOK = () => {
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          return;
        }
        if (!values.mobile) {
          message.error("手机号错误！");
          return;
        }
        values.code = Number(values.code);
        dispatch({ type: 'forgetPassword/doChangePassword', payload: values });
        resetFields();
      });
    };
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
    return (
      <Page loading={loading.effects['accountmanagement/laterSomeSecond']}>
        <div className={styles.changepasswordBlock}>
          <Row>
            <Col span={4} />
            <Col span={10}>
              <Form hideRequiredMark>
                {/*<Form.Item {...formItemLayout} label={"您的电话号码"} hasFeedback>*/}
                {/*<span>{app.user.Mobile || '—'}</span>*/}
                {/*</Form.Item>*/}
                <Form.Item {...formItemLayout} label={"您的电话号码"} hasFeedback>
                  {getFieldDecorator('mobile', {
                    rules: [
                      {
                        len: 11,
                        message: "请输入11位手机号",
                      },
                      {
                        pattern: /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/,
                        message: "请输入正确！",
                      },
                    ],
                    initialValue: `${user.userInfo.Mobile || ''}`,
                  })(<Input size="large" readOnly />)}
                </Form.Item>
                <Form.Item {...formItemLayout} label={"验证码"}>
                  <Row gutter={8}>
                    <Col span={13}>
                      {getFieldDecorator('code', {
                        rules: [{ required: true, whitespace: true, message: '验证码不能为空！' }],
                      })(
                        <Input size="large" placeholder="请输入验证码" />
                      )}
                    </Col>
                    <Col span={11} className={styles.CodeBlock}>
                      <Button type="primary" onClick={getCode} loading={loading.effects['forgetPassword/getCode']}>获取验证码</Button>
                    </Col>
                  </Row>
                </Form.Item>
                <Form.Item {...formItemLayout} label={"新密码"} hasFeedback>
                  {getFieldDecorator('password', {
                    rules: [
                      {
                        required: true,
                        message: "密码不能为空！",
                      },
                      {
                        min: 6,
                        message: "密码不能少于6位！",
                      }, {
                        validator: this.checkConfirm,
                      },
                    ],
                  })(<Input size="large" type="password" onPressEnter={handleOK} placeholder="请输入新密码（6~20位数字加字母）" />)}
                </Form.Item>
                <Form.Item {...formItemLayout} label={"确认密码"} hasFeedback>
                  {getFieldDecorator('confirmPassword', {
                    rules: [
                      {
                        required: true,
                        message: "确认密码不能为空！",
                      }, {
                        validator: this.checkPassword,
                        message: "两次密码不一致！",
                      },
                    ],
                  })(<Input size="large" type="password" onPressEnter={handleOK} placeholder="请输入新密码" />)}
                </Form.Item>
                <Row>
                  <Col span={8} />
                  <Col span={8}>
                    <Button type="primary" className={styles.submitBtn} size="large" onClick={handleOK} loading={loading.effects['forgetPassword/doChangePassword']}>
                      确定
                    </Button>
                  </Col>
                  <Col span={8} />
                </Row>
              </Form>
            </Col>
            <Col span={10} />
          </Row>
        </div>
      </Page>
    );
  }
}

export default connect(({ loading, user, app, forgetPassword }) => ({ loading, user, app, forgetPassword }))(Form.create({})(ChangePassword));
